<%--
  Created by IntelliJ IDEA.
  User: ln
  Date: 2021/3/1
  Time: 15:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    //获取项目名称
    String path = request.getContextPath();
    //获取: 协议://服务器名称:/端口号+ path +"/"
    //http://localhost:8080/StuAndTeacher/  --->main.jsp
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<html>

<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <base href="<%=basePath%>"><%--它必须要放在最上面，这样系统能找到layui.css样式，然后把html骨架给添加到样式中--%>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>


<body>
<div style="margin-bottom: 5px;">

    <!-- 示例-970 -->
    <ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="3820120620"></ins>

</div>

<div class="layui-btn-group demoTable">
    <button class="layui-btn" data-type="getCheckData">获取选中行数据</button>
    <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
    <button class="layui-btn" data-type="isAll">验证是否全选</button>
</div>
<%--
<table class="layui-table" lay-data="{width: 892, height:330, url:'/demo/table/user/', page:true, id:'idTest'}" lay-filter="demo">
    <thead>
    <tr>
        <th lay-data="{type:'checkbox', fixed: 'left'}"></th>
        <th lay-data="{field:'id', width:80, sort: true, fixed: true}">ID</th>
        <th lay-data="{field:'username', width:80}">学号</th>
        <th lay-data="{field:'sex', width:80, sort: true}">姓名</th>
        <th lay-data="{field:'city', width:80}">性别</th>
        <th lay-data="{field:'sign', width:160}">年龄</th>
        <th lay-data="{field:'experience', width:80, sort: true}">班级</th>
        <th lay-data="{field:'classify', width:80}">专业</th>
        <th lay-data="{field:'wealth', width:135, sort: true}">院系</th>
&lt;%&ndash;        <th lay-data="{field:'score', width:80, sort: true, fixed: 'right'}">评分</th>&ndash;%&gt;
        <th lay-data="{fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}"></th>
    </tr>
    </thead>
</table>--%>

<table id="demo" lay-filter="demo"></table>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>

    layui.use('table', function(){
        var table = layui.table;

        tableResult = table.render({
            elem: '#demo' //获取table标签对象,准备填充数据
            ,url: 'findStudent' //获取数据的接口(servlet)
            /*,where:{} */  //传额外参数到servlet
            ,page: true //开启分页
            ,size:"lg" //设置表格大小
            ,limit:5  //每页显示的条数是几条 (默认会向servlet发送 page(1)--第一页 和 limit(10)--显示10条 两个参数)
            ,limits:[5, 10, 15, 20, 25] //设置每页显示几条数据'
            ,toolbar:true  //工具头,开启 删选,导出,打印的根据头(显示在表格的右边)
            ,cols: [[ //表头
                {field: 'stuNum', title: '学号', fixed: 'left',align:"center"}
                {field: 'stuNum', title: '学号', fixed: 'left',align:"center"}
                ,{field: 'stuName', title: '姓名',align:"center"}
                ,{field: 'stuClass', title: '班级',align:"center"}
                ,{field: 'courseName', title: '科目' ,align:"center"}
                ,{field: 'scoreGrade', title: '成绩',align:"center"}
                ,{field: 'major', title: '专业',align:"center",}
            ]]
        });
























        //监听表格复选框选择
        table.on('checkbox(demo)', function(obj){
            console.log(obj)
        });
        //监听工具条
        table.on('tool(demo)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.msg('ID：'+ data.id + ' 的查看操作');
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.alert('编辑行：<br>'+ JSON.stringify(data))
            }
        });

        var $ = layui.$, active = {
            getCheckData: function(){ //获取选中数据
                var checkStatus = table.checkStatus('idTest')
                    ,data = checkStatus.data;
                layer.alert(JSON.stringify(data));
            }
            ,getCheckLength: function(){ //获取选中数目
                var checkStatus = table.checkStatus('idTest')
                    ,data = checkStatus.data;
                layer.msg('选中了：'+ data.length + ' 个');
            }
            ,isAll: function(){ //验证是否全选
                var checkStatus = table.checkStatus('idTest');
                layer.msg(checkStatus.isAll ? '全选': '未全选')
            }
        };

        $('.demoTable .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>

</body>
</html>
